<template>
  <div class="projects-page">
    <!-- 项目展示头部 -->
    <div class="projects-header">
      <div class="container">
        <h1>项目展示</h1>
        <div class="filters">
          <button 
            v-for="category in categories" 
            :key="category"
            :class="['filter-btn', { active: currentCategory === category }]"
            @click="setCategory(category)"
          >
            {{ category }}
          </button>
        </div>
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="projects-content">
      <div class="container">
        <div class="projects-grid">
          <div 
            v-for="project in filteredProjects" 
            :key="project.id"
            class="project-card"
            :class="{ 'featured': project.featured }"
          >
            <div class="project-image">
              <img :src="project.image" :alt="project.name">
              <div class="project-overlay">
                <div class="project-links">
                  <a :href="project.demo" target="_blank" class="project-link">
                    <i class="fas fa-external-link-alt"></i>
                    <span>演示</span>
                  </a>
                  <a :href="project.github" target="_blank" class="project-link">
                    <i class="fab fa-github"></i>
                    <span>源码</span>
                  </a>
                </div>
              </div>
            </div>
            <div class="project-info">
              <div class="project-header">
                <h3>{{ project.name }}</h3>
                <span v-if="project.featured" class="featured-badge">
                  <i class="fas fa-star"></i> 精选
                </span>
              </div>
              <p class="project-description">{{ project.description }}</p>
              <div class="project-tech">
                <span 
                  v-for="tech in project.technologies" 
                  :key="tech" 
                  class="tech-tag"
                >
                  {{ tech }}
                </span>
              </div>
              <div class="project-meta">
                <span class="project-date">
                  <i class="far fa-calendar-alt"></i>
                  {{ project.date }}
                </span>
                <span class="project-category">
                  <i class="far fa-folder"></i>
                  {{ project.category }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 项目分类
const categories = ['全部', 'AI应用', '数据分析', '机器学习', '企业应用']
const currentCategory = ref('全部')

// 项目数据
const projects = ref([
  {
    id: 1,
    name: '智能客服系统',
    description: '基于大语言模型的智能客服系统，提供24/7全天候服务，支持多语言对话和个性化回复',
    image: '/projects/chatbot.jpg',
    technologies: ['Python', 'Vue.js', 'GPT-3', 'MongoDB'],
    demo: 'https://demo.example.com/chatbot',
    github: 'https://github.com/example/chatbot',
    category: 'AI应用',
    date: '2024-01',
    featured: true
  },
  {
    id: 2,
    name: '数据可视化平台',
    description: '企业级数据分析和可视化平台，支持多维度数据展示和实时数据监控',
    image: '/projects/data-viz.jpg',
    technologies: ['React', 'D3.js', 'Node.js', 'PostgreSQL'],
    demo: 'https://demo.example.com/data-viz',
    github: 'https://github.com/example/data-viz',
    category: '数据分析',
    date: '2023-12'
  },
  // ... 添加更多项目
])

// 过滤项目
const filteredProjects = computed(() => {
  if (currentCategory.value === '全部') {
    return projects.value
  }
  return projects.value.filter(project => project.category === currentCategory.value)
})

// 设置当前分类
const setCategory = (category: string) => {
  currentCategory.value = category
}
</script>

<style scoped lang="scss">
.projects-page {
  .projects-header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 60px 0;
    color: white;
    text-align: center;

    h1 {
      font-size: 2.5rem;
      margin-bottom: 30px;
    }

    .filters {
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;

      .filter-btn {
        padding: 8px 20px;
        border: 2px solid white;
        background: transparent;
        color: white;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover, &.active {
          background: white;
          color: var(--primary-color);
        }
      }
    }
  }

  .projects-content {
    padding: 60px 0;
    background: var(--bg-color);

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;
    }

    .project-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-10px);

        .project-image .project-overlay {
          opacity: 1;
        }
      }

      &.featured {
        grid-column: span 2;

        @media (max-width: 768px) {
          grid-column: span 1;
        }
      }

      .project-image {
        position: relative;
        height: 200px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        .project-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0,0,0,0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;

          .project-links {
            display: flex;
            gap: 20px;

            .project-link {
              color: white;
              text-decoration: none;
              padding: 10px 20px;
              border: 2px solid white;
              border-radius: 25px;
              display: flex;
              align-items: center;
              gap: 8px;
              transition: all 0.3s ease;

              &:hover {
                background: white;
                color: var(--primary-color);
              }
            }
          }
        }
      }

      .project-info {
        padding: 20px;

        .project-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;

          h3 {
            color: var(--text-color);
            margin: 0;
          }

          .featured-badge {
            background: var(--primary-color);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }

        .project-description {
          color: #666;
          margin-bottom: 15px;
          line-height: 1.6;
        }

        .project-tech {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 15px;

          .tech-tag {
            background: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.9em;
          }
        }

        .project-meta {
          display: flex;
          gap: 20px;
          color: #666;
          font-size: 0.9em;

          span {
            display: flex;
            align-items: center;
            gap: 5px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .projects-page {
    .projects-header {
      padding: 40px 0;

      h1 {
        font-size: 2rem;
      }
    }

    .projects-content {
      padding: 30px 0;
    }
  }
}
</style> 